<!-- 订单详情 -->
<template>
	<view class="order-detail-wrap">
		<!-- 收货地址 -->		
		<view class="address-wrap" v-if="orderDetail.consignee">
			<view class="left">
				<view class="address-box">
					<view class="ico">
						<u-icon name="map-fill" color="#FC5351" size="40rpx"></u-icon>
					</view>
					<view class="intro">
						<view class="address-user">
							<text class="address-username">{{ orderDetail.consignee }}</text>
							<text class="address-phone">{{ orderDetail.phone | phoneFilter}}</text>
						</view>
						<view class="address-detail">{{ orderDetail.province_name }}{{ orderDetail.city_name }}{{ orderDetail.area_name }}{{ orderDetail.address }}</view>
					</view>
				</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		
		<view class="order-wrap">
			<view class="order-list" v-for="order in orderDetail.item" :key="order.id">
				<!-- 商品信息 -->
				<view class="order-card" @tap="jump('/pages/goods/new_detail', { id: order.goods_id })">
					<image class="goods_img"  lazy-load fade-show :src="order.goods_image" mode="aspectFill"></image>
					<view class="goods-intro">
						<view class="row">
							<view class="goods-title">{{order.goods_title}}</view>
							<view class="goods-price">￥{{ order.goods_price || 0 }}</view>
						</view>
						<view class="row">
							<view class="goods_sku">{{ order.goods_sku_text ? order.goods_sku_text : '' }}</view>
							<view class="goods-num">X{{ order.goods_num || 0 }}</view>
						</view>
					</view>
				</view>
				<!-- 配送方式 -->
				<view class="express-type-box u-flex u-row-between">
					<view class="u-flex">
						<view class="express-type--title">配送：</view>
						<view class="express-type--content">{{ expressType[order.dispatch_type] }}</view>
					</view>
					<!-- 发货详情 -->
					<view
						class="u-flex express-type--detail"
						v-if="order.dispatch_type !== 'express'"
						@tap="goDistribution(order.dispatch_type, orderDetail.id, order.id, order.dispatch_status)"
					>
						<text>详情</text>
						<text class="u-iconfont uicon-arrow-right" style="color: #666;"></text>
					</view>
				</view>
				
				<view class="order-bottom u-flex">
					<!-- 退款原因 -->
					<view class="refund_msg" v-if="order.refund_msg">
						<text class="refund-title">退款原因：</text>
						{{ order.refund_msg }}
					</view>
					<view class="btn-box" v-for="(btn, index) in order.btns" :key="btn">
						<button @tap.stop="onConfirm(orderDetail.id, order.id)" class="u-reset-button btn2" v-if="btn === 'get'">
							确认收货
						</button>
						<button
							@tap.stop="onComment(orderDetail.id, order.id)"
							class="u-reset-button btn1"
							v-if="btn === 'comment'"
						>
							去评价
						</button>
						<button
							@tap.stop="jump('/pages/goods/new_detail', { id: order.goods_id })"
							class="u-reset-button btn1"
							v-if="btn === 'buy_again'"
						>
							再次购买
						</button>
						<button
							@tap="onAftersaleDetail(order.ext_arr.aftersale_id)"
							class="u-reset-button btn1"
							v-if="btn === 'aftersale_info'"
						>
							售后详情
						</button>
						<button
							@tap.stop="onAftersale(orderDetail.id, order.id)"
							class="u-reset-button btn1"
							v-if="btn === 'aftersale'"
						>
							申请售后
						</button>
						<button
							@tap.stop="onAftersale(orderDetail.id, order.id)"
							class="u-reset-button btn1"
							v-if="btn === 're_aftersale'"
						>
							重新售后
						</button>
					</view>
				</view>
			</view>
			
			<!-- 价格信息 -->
			<view class="order-row-box order-price-box" v-if="orderDetail.id">
				<view class="item">
					<text class="title">商品总额</text>
					<text class="detail">￥{{ orderDetail.goods_amount }}</text>
				</view>
				<view class="item">
					<text class="title">运费</text>
					<text class="detail">
						<block v-if="orderDetail.dispatch_amount>0">￥{{ orderDetail.dispatch_amount }}</block>
						<block v-else>包邮</block>
					</text>
				</view>
				<view class="item" v-if="orderDetail.discount_fee>0">
					<text class="title">优惠金额</text>
					<text class="detail">-￥{{ orderDetail.discount_fee }}</text>
				</view>
				<view class="item" v-if="orderDetail.score_fee">
					<text class="title">积分</text>
					<text class="detail">-{{ orderDetail.score_fee }}积分</text>
				</view>
				<view class="item">
					<text class="title">{{ orderDetail.status <= 0 ? '需付款' : '实付款' }}：</text>
					<text class="detail price">￥{{ orderDetail.total_fee }}</text>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-row-box" v-if="orderDetail.id">
				<view class="item">
					<text class="title">订单编号：</text>
					<text class="detail order_sn" @tap="onCopy(orderDetail.order_sn)">{{ orderDetail.order_sn }}</text>
				</view>
				<view class="item">
					<text class="title">下单时间：</text>
					<text class="detail create_time">{{ orderDetail.createtime }}</text>
				</view>
				<view class="item" v-if="orderDetail.status > 0">
					<text class="title">支付方式：</text>
					<text class="detail">{{ payType[orderDetail.pay_type] }}</text>
				</view>
				<view class="item" v-if="orderDetail.status > 0">
					<text class="title">支付时间：</text>
					<text class="detail">{{ orderDetail.paytime }}</text>
				</view>
			</view>
		</view>
		

		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom" v-if="orderDetail.btns.length">
			<block v-for="btn in orderDetail.btns" :key="btn">
				<button v-if="btn === 'cancel'" @tap.stop="onCancel(orderDetail.id)" class="u-reset-button obtn">取消订单</button>
				<button v-if="btn === 'pay'" @tap.stop="onPay(orderDetail.id)" class="u-reset-button obtn obtn3">付款</button>
				<button v-if="btn === 'groupon'" @tap.stop="jump('/pages/activity/groupon/new_detail', { id: orderDetail.ext_arr.groupon_id })" class="u-reset-button obtn">
					拼团详情
				</button>
				<button v-if="btn === 'delete'" @tap.stop="onDelete(orderDetail.id)" class="u-reset-button obtn">删除</button>
				<button v-if="btn === 'express'" @tap.stop="onExpress(orderDetail.id)" class="u-reset-button obtn">查看物流</button>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			time: 0,
			orderDetail: {},
			orderStatus: {
				'-2': '已关闭',
				'-1': '已取消',
				'0': '未付款',
				'1': '已付款',
				'2': '已完成'
			},
			payType: {
				wallet: '购物金支付',
				wechat: '微信支付',
				alipay: '支付宝支付',
				iospay: 'ApplePay'
			},
			expressType: {
				express: '物流快递',
				selfetch: '到店/自提',
				store: '商家配送',
				autosend: '自动发货'
			}
		};
	},
	onShow() {
		this.getOrderDetail();
	},
	onLoad(option) {
		console.log(option)
	},
	filters:{
	    phoneFilter(val){
			let reg = /^(.{3}).*(.{4})$/
			return val.replace(reg,'$1****$2')
		}
	},
	computed: {
		allNum() {
			if (this.orderDetail.item) {
				let items = this.orderDetail.item;
				let allPrice = 0;
				items.forEach(p => {
					allPrice += p.goods_num;
				});
				return allPrice;
			}
		}
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 详情发货信息
		goDistribution(dispatchType, orderId, orderItemId) {
			this.jump('/pages/order/express/distribution-detail', { expressType: dispatchType, orderId: orderId, orderItemId: orderItemId });
		},
		// 订单详情
		getOrderDetail() {
			let that = this;
			that.$http('order.detail', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					that.orderDetail = res.data;
					that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
					that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
					
					uni.setNavigationBarTitle({
						title:that.orderDetail.status_desc||'订单详情'
					});
					
				}
			});
		},
		// 复制
		onCopy(code) {
			let that = this;
			uni.setClipboardData({
				data: code,
				success: function(data) {
					that.$u.toast('已复制到剪切板');
				}
			});
		},

		// 确认收货
		onConfirm(id, itemId) {
			let that = this;
			that.$http(
				'order.confirm',
				{
					id: id,
					order_item_id: itemId
				},
				'确认中...'
			).then(res => {
				if (res.code === 1) {
					that.getOrderDetail();
				}
			});
		},

		// 申请售后
		onAftersale(orderId, orderItemId) {
			this.$Router.push({
				path: '/pages/order/after-sale/refund',
				query: { orderId: orderId, orderItemId: orderItemId }
			});
		},

		// 售后详情
		onAftersaleDetail(id) {
			this.jump('/pages/order/after-sale/detail', { aftersaleId: id });
		},

		// 取消订单
		onCancel(id) {
			let that = this;
			uni.showModal({
				title: '取消确认',
				content: '是否确定取消该订单？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						that.$http(
							'order.cancel',
							{
								id: id
							},
							'取消中...'
						).then(res => {
							if (res.code === 1) {
								that.$Router.back();
							}
						});
					}
				}
			});
		},

		// 立即购买
		onPay(id) {
			uni.navigateTo({
				url: `/pages/order/payment/method?orderId=${id}`
			});
		},

		// 删除订单
		onDelete(orderId) {
			let that = this;
			uni.showModal({
				title: '删除确认',
				content: '是否删除该订单？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						that.$http('order.deleteOrder', {
							id: orderId
						}).then(res => {
							if (res.code === 1) {
								that.$Router.back();
							}
						});
					}
				}
			});
		},

		// 待评价
		onComment(orderId, orderItemId) {
			this.jump('/pages/goods/comment/add-comment', { orderId: orderId, orderItemId: orderItemId });
		},

		// 查看物流
		onExpress(orderId, orderItemId) {
			let that = this;
			that.$http('order.expressList', {
				order_id: orderId
			}).then(res => {
				if (res.code === 1) {
					if (res.data.length == 1) {
						this.jump('/pages/order/express/express-detail', { orderId: orderId, expressId: res.data[0].id });
					} else if (res.data.length > 1) {
						this.jump('/pages/order/express/express-list', { orderId: orderId });
					} else {
						this.$u.toast('暂无包裹~');
					}
				}
			});
		}
	}
};
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
.address-wrap{
	background-color: #fff;
	padding: 20rpx;
	margin: 20rpx 24rpx;
	border-radius: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left{
		.address-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.ico{
				
			}
			.intro{
				margin-left: 20rpx;
				
				.address-user{
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 44rpx;
					padding-bottom: 16rpx;
					.address-username{
						
					}
					.address-phone{
						margin-left: 20rpx;
					}
				}
				
				.address-detail{
					width: 522rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 32rpx;
					padding-bottom: 16rpx;
				}
			}
		}
	}
	.right{
		
	}
}

.order-wrap{
	background-color: #fff;
	padding: 40rpx 20rpx;
	margin: 20rpx 24rpx;
	border-radius: 16rpx;
	.order-list{
		.order-card{
			padding: 0 20rpx;
			margin-bottom: 8rpx;
			display: flex;
			.goods_img{
				width: 200rpx;
				height: 150rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}
			.goods-intro{
				flex-grow: 1;
				.row{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					.goods-title{
						font-weight: 500;
						color: #333333;
						font-size: 32rpx;
						width: 258rpx;
					}
					.goods-price{
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
					}
					.goods_sku,.goods-num{
						font-weight: 400;
						color: #777777;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
	.order-row-box{
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #333333;
			
			.title{
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}
			
			.detail{
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
			}
			
			.price{
				color: #FC5351;
			}
			
			.order_sn,.create_time{
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}
	
	.order-price-box{
		border-bottom: 1rpx solid #F3F3F3;
		padding: 20rpx 0;
	}
}

.foot-wrap {
	width: 100%;
	height: 100rpx;
	height: calc(100rpx + constant(safe-area-inset-bottom));
	height: calc(100rpx + env(safe-area-inset-bottom));
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	
	button{
		margin: 0 20rpx 0 0;
		padding: 0;
	}
	
	.obtn{
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #FFFFFF;
		border-radius: 108rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		border: 1rpx solid #999999;
	}
	
	.obtn3 {
		color: #FC5351;
		border: 1rpx solid #FC5351;
	}
}


// 配送方式
.express-type-box {
	height: 90rpx;
	background: rgba(247, 247, 247, 1);
	border-radius: 10rpx;
	padding: 0 20rpx;
	.express-type--title {
		font-size: 28rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}
	.express-type--content {
		font-size: 26rpx;

		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.express-type--detail {
		font-size: 24rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 30rpx;
	}
}
.refund_msg {
	font-size: 28rpx;
	color: #999;
	flex: 1;
	text-align: left;
}
.order-bottom {
	background: #fff;
	justify-content: flex-end;
	padding: 20rpx 0;
	.btn1 {
		width: 160rpx;
		line-height: 64rpx;
		border: 1rpx solid rgba(223, 223, 223, 1);
		border-radius: 108rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0;
		margin-left: 20rpx;
	}
	.btn2 {
		width: 160rpx;
		line-height: 64rpx;
		border: 1rpx solid #FC5351 !important;
		border-radius: 108rpx;
		font-size: 28rpx;
		color: #FC5351 !important;
		padding: 0;
		background: #fff;
		margin-left: 20rpx;
	}
}
	


</style>
